<template>
  <div id="chart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'BottomLeftChart',
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('chart');
      this.chart = echarts.init(chartDom);

      // 数据定义，每个对象代表一个二级指标，
      // secondary: 二级指标相对权重
      // tertiary: 各三级指标数据（堆叠后总和等于二级指标的权重）
      const categories = [
        {
          name: '核心供应商',
          secondary: 0.301, // 对应原数据第一行第二个数值
          tertiary: [
            { name: '关键原材料/配件进口依赖度', value: 0.189 },
            { name: '关键设备进口依赖度', value: 0.213 },
            { name: '关键技术服务进口依赖度', value: 0.172 },
            { name: '产品国产化率', value: 0.426 }
          ]
        },
        {
          name: '单一供应商',
          secondary: 0.299, // 对应原数据第二行第二个数值
          tertiary: [
            { name: '关键原材料/配件进口依赖度', value: 0.132 },
            { name: '关键设备进口依赖度', value: 0.146 },
            { name: '关键技术服务进口依赖度', value: 0.159 },
            { name: '产品国产化率', value: 0.273 },
            { name: '单一供应商数量占比', value: 0.290 } // 对应原数据最后一列
          ]
        },
        {
          name: '整体结构',
          secondary: 0.400, // 对应原数据第三行第二个数值
          tertiary: [
            { name: '供应链整体不稳定性', value: 0.436 },
            { name: '供应链整体脆弱性', value: 0.279 },
            { name: '供应链整体抗毁性', value: 0.285 }
          ]
        },
        {
          name: '技术封锁',
          secondary: 0.428, // 对应原数据第四行第二个数值
          tertiary: [
            { name: '关键设备持有国集中度', value: 0.186 },
            { name: '关键设备持有国敌对程度', value: 0.328 },
            { name: '关键技术服务持有国集中度', value: 0.224 },
            { name: '关键技术服务持有国敌对程度', value: 0.262 }
          ]
        },
        {
          name: '政治冲突',
          secondary: 0.332, // 对应原数据第五行第二个数值
          tertiary: [
            { name: '关键设备供应国政局不稳定程度', value: 0.439 },
            { name: '关键技术服务提供国政局不稳定程度', value: 0.275 },
            { name: '关键原材料/配件供应国政府不稳定程度', value: 0.286 }
          ]
        },
        {
          name: '区域热点',
          secondary: 0.117, // 对应原数据第六行第二个数值
          tertiary: [
            { name: '恐怖袭击/局部战争导致的供应中断', value: 1.000 } // 简化名称
          ]
        },
        {
          name: '自然灾害',
          secondary: 0.123, // 对应原数据第七行第二个数值
          tertiary: [
            { name: '洪水/地震导致的供应中断', value: 1.000 } // 简化名称
          ]
        },
        {
          name: '生产经营',
          secondary: 0.328, // 对应原数据第八行第二个数值
          tertiary: [
            { name: '民营生产企业总数占比', value: 0.189 },
            { name: '核心供应商民营企业可替代性', value: 0.213 },
            { name: '关键原材料/配件产量', value: 0.236 },
            { name: '按时交付产品占比', value: 0.362 } // 简化名称
          ]
        },
        {
          name: '质量安全',
          secondary: 0.425, // 对应原数据第九行第二个数值
          tertiary: [
            { name: '产品不合格率', value: 0.397 },
            { name: '关键设备故障率', value: 0.603 }
          ]
        },
        {
          name: '科技人才',
          secondary: 0.247, // 对应原数据第十行第二个数值
          tertiary: [
            { name: '关键技术研发能力', value: 0.315 },
            { name: '关键技术与国外先进技术对比', value: 0.267 }, // 简化名称
            { name: '保障政策完善度', value: 0.224 },
            { name: '复合型人才完备度', value: 0.194 }
          ]
        }
      ];

      // x轴显示二级指标名称
      const xAxisData = categories.map(cat => cat.name);
      // 计算各组中最多有多少个三级指标（用于构造堆叠系列）
      const maxTertiary = Math.max(...categories.map(cat => cat.tertiary.length));

      // 构造堆叠系列，每个系列代表各组中第 i 个三级指标
      const series = [];
      // 颜色设置
      const colors = ['#1f77b4', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];

      for (let i = 0; i < maxTertiary; i++) {
        const seriesData = [];
        for (let j = 0; j < categories.length; j++) {
          const cat = categories[j];
          if (cat.tertiary[i]) {
            // 计算该段值 = 二级指标权重 × 三级指标相对权重
            const segValue = cat.secondary * cat.tertiary[i].value;
            seriesData.push({
              value: segValue,
              // 保存三级指标名称，用于 tooltip 显示
              thirdName: cat.tertiary[i].name
            });
          } else {
            seriesData.push(0);
          }
        }
        series.push({
          name: '',
          type: 'bar',
          stack: 'total',
          barWidth: '50%',  // 让柱子更窄，默认是自动的
          label: { show: false },
          animationDelay: function (idx) {
            return idx * 100;
          },
          itemStyle: {
            color: colors[i % colors.length], // 依次取颜色
            borderRadius: [3, 3, 0, 0],
            shadowBlur: 2,
            shadowColor: 'rgba(0,0,0,0.2)',
            shadowOffsetX: 1,
            shadowOffsetY: 1
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 4,
              shadowColor: 'rgba(0,0,0,0.4)'
            }
          },
          data: seriesData
        });
      }

      const option = {
        // 添加标题，显示在图表上方
        title: {
          text: '风险指标图',
          left: 'center',
          top: '5%',
          textStyle: {
            color: 'white',
            fontSize: 20
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          backgroundColor: 'rgba(50,50,50,0.7)',
          borderColor: '#777',
          borderWidth: 1,
          formatter: function(params) {
            const idx = params[0].dataIndex;
            const catData = categories[idx];
            let tip = `<strong>${catData.name}</strong><br/>二级指标权重：${catData.secondary}<br/>`;
            tip += '三级指标：<br/>';
            params.forEach(item => {
              if (item.value && item.data && item.data.thirdName) {
                tip += `${item.data.thirdName}: ${item.value.toFixed(3)}<br/>`;
              }
            });
            return tip;
          }
        },
        legend: { show: false },
        grid: {
          left: '5%',
          right: '3%',
          bottom: '20%', // 为 tooltip 或可能的富文本预留空间
          top: '20%' // 调整 top，确保标题有足够空间
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLabel: {
            fontSize: 16,
            color: 'white',
            interval: 0, // 确保所有标签都显示
            rotate: 0, // 不旋转
            formatter: function(value, index) {
              return index % 2 === 0 ? value : '\n' + value; // 偶数行不变，奇数行下移一行
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '相对权重',
          nameTextStyle: { color: 'white' , fontSize: 16},
          min: 0,
          max: 1,
          axisLabel: { color: 'white', fontSize: 16 },
          splitLine: {
            lineStyle: { type: 'dashed', color: '#ddd' }
          }
        },
        series: series,
        animationDuration: 800,
        animationEasing: 'cubicOut'
      };

      this.chart.setOption(option);
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
};
</script>

<style scoped>
#chart {
  width: 100%;
  height: 280px;}
</style>
